<template>
  <div>
      <t-dialog
      header="订单详情"
      :visible.sync="visible"
      @confirm="onConfirm"
      :onConfirm="onConfirmAnother"
      :onCancel="onCancel"
      :onEscKeydown="onKeydownEsc"
      :onCloseBtnClick="onClickCloseBtn"
      :onOverlayClick="onClickOverlay"
      :draggable="true"
      :onClose="close"
    >
        <div slot="body">
            <t-list :split="true">
                <t-list-item>
                    <t-list-item-meta title="订单名称" :description="confirmBody.name"></t-list-item-meta>
                </t-list-item>
                <t-list-item>
                    <t-list-item-meta title="订单状态">
                        <template slot="description">
                            <t-tag v-if="confirmBody.status === 1" theme="warning" variant="light">退款中</t-tag>
                            <t-tag v-if="confirmBody.status === 0" theme="danger" variant="light">已退款</t-tag>
                            <t-tag v-if="confirmBody.status === 2" theme="warning" variant="light">已驳回</t-tag>
                            <t-tag v-if="confirmBody.status === 3" theme="success" variant="light">进行中</t-tag>
                            <t-tag v-if="confirmBody.status === 4" theme="success" variant="light">已完成</t-tag>
                        </template>
                    </t-list-item-meta>
                </t-list-item>
                <t-list-item>
                    <t-list-item-meta title="订单编号" :description="confirmBody.no"></t-list-item-meta>
                </t-list-item>
                <t-list-item>
                    <t-list-item-meta title="订单类型">
                        <template slot="description">
                            <p v-if="confirmBody.contractType === 0">已退款</p>
                            <p v-if="confirmBody.contractType === 1">待审核</p>
                            <p v-if="confirmBody.contractType === 2">待履行</p>
                        </template>
                    </t-list-item-meta>
                </t-list-item>
                <t-list-item>
                    <t-list-item-meta title="订单金额" :description="confirmBody.amount"></t-list-item-meta>
                </t-list-item>
                <t-list-item>
                    <t-list-item-meta title="订单创建时间" :description="confirmBody.updateTime"></t-list-item-meta>
                </t-list-item>
            </t-list>
        </div>
    </t-dialog>
  </div>
</template>

<script>
export default {
    name:'detailsdata',
    props: {
        confirmBody:{
            type: Object 
        }
    },
    data() {
        return {
            visible: false,
        };
    },
    computed : {
        // 详情内容
        // confirmBodydata () {
        //     return this.confirmBody
        // },
    },
     methods: {
        onConfirm(context) {
            console.log('@confirm与onConfirm任选一种方式即可，其他几个事件类似', context);
            this.visible = false;
        },
        onConfirmAnother(context) {
            console.log('点击了确认按钮', context);
        },
        close(context) {
            console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
        },
        onCancel(context) {
            console.log('点击了取消按钮', context);
        },
        onKeydownEsc(context) {
            console.log('按下了ESC', context);
        },
        onClickCloseBtn(context) {
            console.log('点击了关闭按钮', context);
        },
        onClickOverlay(context) {
            console.log('点击了蒙层', context);
        },
    },
}
</script>

<style>

</style>